<template>
  <div id="app" class="indexSports">
    <a-row :gutter="12">
      <a-col :sm="24"   :xxl="12" class="mb">
        <card :title="'精彩瞬间'" :routerUrl="'/management/SkTakeNotesList'">
          <template slot="cardMain">
            <a-row :gutter="12">
              <a-col :span="24">
                <p class="subtitle">照片视频录音记录</p>
                <div style="display: flex;justify-content: space-around;">
                  <p>全园照片总数量： <span style="color: #33B6A4;">{{pictureTotal}}</span>  个</p>
                  <p>全园视频总数量： <span style="color: #33B6A4;">{{ videoTotal }}</span>  个</p>
                  <p>全园录音总数量： <span style="color: #33B6A4;">{{ recordingTotal }}</span>  个</p>
                </div>
                <stacked-line :width="'100%'" :height="'277px'" :seriesName="['照片','视频','录音']" :unit="'个'" :xData="photoXData" :data="photoYData"></stacked-line>
              </a-col>
            </a-row>
          </template>
        </card>
      </a-col>
      <a-col :sm="24" :xxl="12" class="mb">
        <card :title="'评价'" :routerUrl="'/management/SKTeachingActivitiesList'">
          <template slot="cardMain">
            <a-row >
              <a-col :span="12">
                <p class="subtitle">评价记录</p>
                <p>全园维度点评个数：  <span style="color: #33B6A4;">{{ totalNum }}</span> 个</p>
                <stacked-line :width="'100%'" :height="'277px'" :seriesName="['点评个数']" :xData="commentXData" :data="commentYData"> </stacked-line>
              </a-col>  
              <a-col :span="12">
                <p class="subtitle">评价维度</p>
                <!-- <trends-pie
                  :data="scenePieData"
                  :width="'100%'"
                  :height="'277px'"
                  :className="'全园'"
                  :text="'评价维度'"
                ></trends-pie> -->
                <radar  :width="'100%'" :height="'277px'" :data="scenePieData" :unit="'个'" :color="['rgba(139, 212, 110, 0.6)','rgba(9, 188, 183, 0.6)']" :thermal="false" ></radar>
              </a-col>  
              <!-- <a-col :sm="12" :lg="7">
                <p class="subtitle">行为</p>
              </a-col>   -->
            </a-row>  
          </template>
        </card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import StackedLine from "@/components/Echarts/StackedLine.vue";
import Pie from "@/components/Echarts/areaPie.vue";
import { getAction } from "@/api/manage.js";
import Radar from "@/components/Echarts/Radar.vue"
import { skClassList } from "@/api/management.js";
import TrendsPie from '@/components/Echarts/TrendsPie.vue'
export default {
  name: 'indexSports',
  data() {
    return {
      photoXData:[],
      photoYData:[],
      pictureTotal:0,
      recordingTotal:0,
      videoTotal:0,
      commentXData:[],
      commentYData:[],
      scenePieData:[],
      actionPieData:[],
      classList:[],
      totalNum:0
    }
  },
  components: {
    StackedLine,
    Pie,
    Radar,
    TrendsPie
  },
  filters: {},

  computed: {},

  created() {
    this.getEvaluateList()
    this.getPhotoData();
    this.getClassList()
    
  },

  activated() {},

  mounted() {
    
  },

  methods: {
    getClassList(){
      this.commentXData = []
      skClassList().then((res)=>{
      if(res.success){
        this.classList = res.result;
        res.result.forEach(item => {
          this.commentXData.push(item.className)
        });
        this.getEvaluate();
      } else {
        this.$message.warning(res.message);
      }
      }).catch((error)=>{
        console.error(error);
      })
    },
    getPhotoData(){
      const url = "/cockpit/record"
      this.photoYData = []
      getAction(url).then((res)=>{
        if(res.success){
          let picture = [],recording = [],video = []
          res.result.forEach(item => {
            this.photoXData.push(item.className);
            picture.push(item.picture)
            recording.push(item.recording)
            video.push(item.video)
            this.videoTotal += item.video;
            this.pictureTotal += item.picture;
            this.recordingTotal += item.recording;
          });
          this.photoYData.push(picture,video,recording)
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 点评
    getEvaluate(){
      const url ="management/skStudentEvaluation/getTodayClassEvaluation"
      getAction(url).then((res)=>{
        if(res.success){
          this.commentYData = []
          this.classList.forEach(item => {
            let classItem = res.result.find(el=>el.classId == item.id);
            if (classItem) {
              this.commentYData.push(classItem.totalNum)
              this.totalNum += classItem.totalNum
            }else{
              this.commentYData.push(0)
            }
          });
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    
    getDimension(evaluateList){
      const url = "/management/skStudentEvaluation/getTodayDimensionEvaluation"
      getAction(url).then((res)=>{
        if(res.success){
          this.scenePieData = []
          evaluateList.forEach(item => {
            let data = res.result.find(el=>el.dimensionCode == item.value)
            if (data) {
              this.scenePieData.push(
                {
                  name:data.dimensionName,
                  studentCount:data.totalNum
                }
              )
            }else{
              this.scenePieData.push(
                {
                  name:item.title,
                  studentCount:0
                }
              )
            }
          });
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 获取所有维度
    getEvaluateList() {
        const url = '/table/skCategory/loadTreeRoot'
        const params = {
          async: true,
          pcode: 'A03'
        }
        getAction(url, params)
          .then(res => {
            if (res.success) {
              this.getDimension(res.result); 
            } else {
              this.$message.warning(res.message)
            }
          })
          .catch(error => {
            console.error(error)
          })
    },
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
@img-url:'../../assets/analysis-img/';
.mb{
  margin-bottom: 12px;
}
.subtitle{
  margin:10px 0 20px 0;
  padding-left:22px;
  background: url('@{img-url}u93.png') no-repeat 0 50% ;
  font-size: 16px;
}

</style>
